<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsx小练习</title>
</head>
<body>
  <!--准备好一个 div-->
  <div id="test"></div>

  <!--引入 react核心库-->
  <script type="text/javascript" src="../js/16.8.4/react.development.js"></script>
  <!--引入 react-dom 用于支持 react 操作 DOM-->
  <script type="text/javascript" src="../js/16.8.4/react-dom.development.js"></script>
  <!--引入 babel 用于将 jsx 转为 js-->
  <script type="text/javascript" src="../js/16.8.4/babel.min.js"></script></body>

  <script type="text/babel">

    /*
    * js语句（代码） 与 js表达式
    *   表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
    *       下列这些都是表达式
    *           1） a
    *           2） a+b
    *           3） demo(1)
    *           4)  arr.map()
    *           5)  function test () {}
    *   语句（代码）
    *       下列这些都是语句（代码）
    *           1） if(){}
    *           2)  for(){}
    *           3） switch(){case:}
    * */
    // 模拟一些数据
    const data = ['Angular','React','Vue']
    // 创建虚拟DOM
    const VDOM = (
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {
              data.map((item,index)=>{
                return <li key={index}>{item}</li>
              })
            }
          </ul>
        </div>
    )
    // 渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>
</html>
